<template>
  <section class="wrapper">
    <section class="top" :style="{backgroundImage: `url(${loginBg})`}">
      <img src="../assets/images/login-logo-text.png" alt="">
      <img src="../assets/images/login-logo.png" alt="">
    </section>
    <form class="login-content layui-form" @submit.prevent>
      <section class="label">
        <img src="../assets/images/user.png" alt="">
        <input name="userName" lay-verify="phone" lay-reqtext="请输入正确的手机号" type="text" placeholder="手机号">
      </section>
      <section class="label">
        <img src="../assets/images/password.png" alt="">
        <input name="passWord" lay-verify="required" lay-reqtext="请输入密码" type="password" placeholder="密码">
      </section>
      <button class="login-btn" lay-submit="" lay-filter="login">
        登录
			</button>
    </form>
    <!--<section class="login-by-code" @click="$router.push({name: 'Login'})">-->
      <!--使用手机号登录-->
    <!--</section>-->
    <common-modal title="账号不存在" :visible.sync="showModal">
      <template #footer>
        <a class="btn" href="javascript:;" @click="showModal = false">知道了</a>
      </template>
    </common-modal>
  </section>
</template>
<script>
  import loginBg from '../assets/images/login-bg.png'
  import {loginByCode} from '@/api/login'

  export default {
    name: 'Login',
    data: () => ({
      loginBg,
			form: null,
      showModal: false
    }),
	  mounted() {
		  layui.use('form', () => {
			  this.form = layui.form
			  this.form.on('submit(login)', data => {
				  loginByCode({prjName: 'MATCH', ...data.field}).then(res => {
					  this.$storage.setData('userInfo', res.userInfo)
					  this.$storage.setData('token', res.token)
					  layer.msg('登录成功', {icon: 1})
					  setTimeout(() => this.$router.push('/'), 2000)
          }).catch(err => {
					  console.log(err)
				  })
			  })
		  })
	  },
    methods: {
      login() {
        this.showModal = true
      },
    }
  }
</script>
<style lang="less" scoped>
  .flex {
    display: flex;
    align-items: center;
  }
  .wrapper {
    min-height: 100vh;
    background: rgb(243, 251, 255);
  }
  .top {
    width: 100%;
    height: 11.467rem;
    -webkit-background-size: cover;
    background-size: cover;
    overflow: hidden;
    img {
      display: block;
      margin: 0.933rem auto;
      width: 8.173rem;
    }
  }
  .login-content {
    transform: translateY(-5.467rem);
    position: relative;
    margin: 0 0.533rem;
    margin-bottom: -2.4rem;
    padding: 0.933rem;
    background-color: #ffffff;
    box-shadow: 0rem 0.053rem 0.4rem 0rem
    rgba(41, 128, 232, 0.1);
    border-radius: 0.133rem;
    .label {
      margin-bottom: 0.8rem;
      padding: 0.4rem 0;
      display: flex;
      align-items: center;
      border-bottom: solid 0.027rem #e0e9ff;
      input {
        padding: 0 0.267rem;
        font-size: 0.427rem;
        color: #7b8197;
        width: 4.5rem;
      }
    }
    .login-btn {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -0.667rem;
      .flex;
      justify-content: center;
      width: 6.267rem;
      height: 1.333rem;
      background-image: linear-gradient(225deg,
      #2b78ee 0%,
      #1f63de 50%,
      #1958d5 75%,
      #134dcd 100%);
      border-radius: 0.667rem;
      font-family: SourceHanSansSC-Regular;
      font-size: 0.48rem;
      color: #ffffff;
    }
    img {
      width: 0.427rem;
    }
  }
  .login-by-code {
    width: 100%;
    /*left: 0;*/
    /*position: absolute;*/
    /*bottom: 0.933rem;*/
    text-align: center;
    font-size: 0.373rem;
    color: #144fce;
  }
</style>
